<style include="settings-shared">
  .add-link {
    background-color: transparent;
    color: var(--cros-link-color);
  }

  .add-link[disabled] {
    color: var(--cros-text-color-disabled);
  }

  .list-item {
    background-color: var(--cros-bg-color-elevation-1);
  }

  cr-input {
    --cr-input-error-display: none;
  }

  #fingerprintTooltip {
    --paper-tooltip-animation: {
      box-shadow: var(--cr-card-shadow);
    }
    --paper-tooltip-background: var(--cros-tooltip-background-color);
    --paper-tooltip-border-radius: 8px;
    --paper-tooltip-delay-out: 500ms;
    --paper-tooltip-opacity: 1;
    --paper-tooltip-padding: 12px 16px;
    --paper-tooltip-text-color: var(--cros-tooltip-label-color);
  }

  #fingerprintNotice {
    --cr-localized-link-display: block;
    font-size: 12px;
    line-height: 18px;
  }

  #fingerprintWarning {
    font-style: italic;
  }
</style>
<h2 class="settings-box">$i18n{lockScreenRegisteredFingerprints}
  <cr-tooltip-icon id="fingerprintTooltip" tooltip-position="right"
      icon-class="cr:help-outline" icon-aria-label="$i18n{learnMore}">
    <localized-link id="fingerprintNotice"
        localized-string="$i18n{lockScreenFingerprintNotice}"
        link-url="$i18n{fingerprintLearnMoreLink}"
        slot="tooltip-text">
      <!-- paper-tooltip probes for children textContent to decide whether
        to show tooltip or not-->
      _
    </localized-link>
  </cr-tooltip-icon>
</h2>
<div class="list-frame layout vertical">
  <iron-list id="fingerprintsList" items="[[fingerprints_]]">
    <template>
      <div class="list-item">
        <cr-input value="{{item}}" on-change="onFingerprintLabelChanged_">
        </cr-input>
        <cr-icon-button class="icon-delete-gray"
            on-click="onFingerprintDeleteTapped_"
            aria-label$="[[getButtonAriaLabel_(item)]]"
            deep-link-focus-id$="[[Setting.kRemoveFingerprintV2]]">
        </cr-icon-button>
      </div>
    </template>
  </iron-list>
  <div class="continuation">
    <cr-button id="addFingerprint" class="add-link action-button"
        on-click="openAddFingerprintDialog_"
        deep-link-focus-id$="[[Setting.kAddFingerprintV2]]">
      $i18n{lockScreenAddFingerprint}
    </cr-button>
  </div>
</div>
<div id="fingerprintWarning" class="settings-box continuation">
  <iron-icon icon="cr:info-outline"></iron-icon>
  $i18n{lockScreenFingerprintWarning}
</div>
<template is="dom-if" if="[[showSetupFingerprintDialog_]]" restamp>
  <settings-setup-fingerprint-dialog
      auth-token="[[authToken]]"
      on-add-fingerprint="updateFingerprintsList_"
      on-close="onSetupFingerprintDialogClose_"
      allow-add-another-finger="[[allowAddAnotherFinger_]]">
  </settings-setup-fingerprint-dialog>
</template>
